
<template>
  <div class="container">
    <b-card-new detail>
        <el-form ref="editPara" label-width="110px" :model="editPara" :rules="rules">
            <el-form-item label="广告名称:" prop="title">
                <el-input v-model="editPara.title" placeholder="请输入广告名称" class="w360"></el-input>
            </el-form-item>
            <el-form-item label="广告图片:" prop="image_url">
                <b-img-upload
                    v-model="editPara.image_url"
                    @input="(e) => handleImgUploaded(e, 'image_url')"
                ></b-img-upload>
                <div class="fication">建议尺寸750px X 420px, 允许上传png、jpg </div>
            </el-form-item>
            <el-form-item label="排序:" prop="display_order">
                <el-input v-model="editPara.display_order" type="number" placeholder="请输入排序" class="w360"></el-input>
            </el-form-item>
            <el-form-item label="广告链接:" prop="link_url">
                <el-input v-model="editPara.link_url" placeholder="请输入广告链接" class="w360"></el-input>
            </el-form-item>
            <el-form-item label="广告时间:" prop="timeGroup">
                <el-date-picker
                    v-model="editPara.timeGroup"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    class="w360"
                    :default-time="['00:00:00', '23:59:59']"
                    >
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="btn-wrapper">
            <b-button-new text="取消" @click="handleBack"></b-button-new>
            <b-button-new text="保存" @click="handleSave"></b-button-new>
        </div>
    </b-card-new>
  </div>
</template>
<script>
const initEditPara = () => ({
    ad_id:"",//广告id
    title: '', // 广告名称
    image_url: '', // 广告图片
    link_url: '', // 广告图片的 URL
    display_order: '', // 广告的显示顺序，数值越小，显示优先级越高
    start_time: '', // 广告开始时间
    end_time: '', // 广告结束时间
    timeGroup:''
})
export default {
  data () {
    return{
        editPara: initEditPara(),
        rules: {
            title: [{ required: true, message: '请输入广告名称', trigger: ['blur', 'change'] }],
            image_url: [{ required: true, message: '请上传广告图片', trigger: ['blur', 'change'] }],
            link_url: [{ required: true, message: '请输入广告链接', trigger: ['blur', 'change'] }],
            display_order: [{ required: true, message: '请输入排序', trigger: ['blur', 'change'] }],
            timeGroup: [{ required: true, message: '请选择广告时间', trigger: ['blur', 'change'] }],
        },
    }
  },
  created() {
    this.editPara.ad_id=this.$route.query.id
    if (this.editPara.ad_id) {
        this.getDetail(id)
    }
  },
  mounted () {
    
  },
  methods: {
    // 获取详情
    getDetail(id) {
        this.$api.setting.adsDetails(id).then(res => {
            this.editPara = res || {}
        })
    },
    // 上传图片成功
    handleImgUploaded(url) {
        this.editPara.image_url = url || "";
    },
    // 取消返回
    handleBack() {
        this.$router.go(-1)
    },
    // 保存
    handleSave() {
        var axiosName=this.editPara.ad_id?'adsEdit':'adsAdd'
        let data = JSON.parse(JSON.stringify(this.editPara));
            data.start_time=data.timeGroup[0];
            data.end_time=data.timeGroup[1];
        this.$refs.editPara.validate((valid) => {
            if (valid) {
              
                this.$api.setting[axiosName](data).then(res => {
                    this.$message.success(this.editPara.ad_id?'编辑成功':'添加成功')
                    this.handleBack()
                })
            }
        })
    }
  }
}
</script>
<style scoped>

</style>
